<template>
  <div>
    <el-dialog title="新增工单" :visible="showAddDialog" @close="close">
      <el-form
        label-width="120px"
        ref="addTask"
        :model="formData"
        :rules="rules"
      >
        <el-form-item prop="innerCode" label="设备编号">
          <el-input
            placeholder="请输入"
            style="width: 80%"
            size="mini"
            v-model="formData.innerCode"
            @input="inputfn"
          />
        </el-form-item>

        <el-form-item label="工单类型" prop="productType">
          <el-select
            placeholder="请选择"
            style="width: 80%"
            size="mini"
            v-model="formData.productType"
          >
            <!-- 遍历列表，生成选项 -->
            <el-option label="补货工单" :value="2" />
          </el-select>
        </el-form-item>

        <el-form-item label="补货数量" prop="ChannelList">
          <template>
            <el-button @click="showvmdialog = true" type="text"
              ><i class="el-icon-document" style="margin: 0 5px"></i
              >补货清单</el-button
            >
          </template>
        </el-form-item>

        <el-form-item label="运营人员" prop="userId">
          <el-select
            placeholder="请选择"
            style="width: 80%"
            size="mini"
            v-model="formData.userId"
          >
            <!-- 遍历列表，生成选项 -->
            <el-option
              v-for="item in OperatorList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            />
          </el-select>
        </el-form-item>

        <el-form-item prop="desc" label="备注">
          <el-input
            placeholder="请输入备注（不超过40字）"
            style="width: 80%"
            size="mini"
            v-model="formData.desc"
          />
        </el-form-item>

        <el-form-item>
          <!-- 按钮 -->
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button
                size="mini"
                @click="quitfn"
                style="background-color: #fbf4f0"
                >取消</el-button
              >
              <el-button
                size="mini"
                type="primary"
                @click="btnOK"
                style="background-color: #ff6c29"
                >确认</el-button
              >
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="补货详情" :visible="showvmdialog" @close="close1">
      <div class="dialog-content">
        <el-table :data="ChannelList" height="250">
          <!-- 放置列 -->
          <el-table-column prop="channelCode" align="center" label="货道编号" />
          <el-table-column prop="sku.skuName" align="center" label="商品名称" />
          <el-table-column
            prop="currentCapacity"
            align="center"
            label="当前数量"
          />
          <el-table-column prop="maxCapacity" align="center" label="还可添加" />
          <el-table-column align="center" label="补满数量">
            <!-- 自定义列结构 -->
            <template v-slot="{ row }">
              <el-input-number
                size="mini"
                :value="row.maxCapacity - row.currentCapacity"
                controls-position="right"
                style="width: 80%; display: flex; flex-direction: column"
              >
              </el-input-number>
            </template>
          </el-table-column>
        </el-table>
        <!-- 按钮 -->
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button
              @click="showvmdialog = false"
              style="background-color: #fbf4f0"
              >取消</el-button
            >
            <el-button
              type="primary"
              @click="showvmdialog = false"
              style="background-color: #ff6c29"
              >确认</el-button
            >
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getChannelList,
  getdetails,
  getOperatorList,
  ReCreatetask,
} from "@/api/businessTask";
export default {
  name: "AddTask",
  props: {
    showAddDialog: {
      type: Boolean,
      require: false,
    },
    taskinfolist: {
      type: Object,
      require: false,
    },
  },
  // {userId:'',userName:'无数据'}
  data() {
    return {
      showvmdialog: false,
      OperatorList: [],
      taskdetailslist: [],
      ChannelList: [],
      expectList: [],
      formData: {
        innerCode: "",
        productType: "",
        userId: "",
        desc: "",
      },
      rules: {
        innerCode: [{ required: true, message: "请输入", trigger: "blur" }],
        productType: [{ required: true, message: "请选择", trigger: "change" }],
        userId: [{ required: true, message: "请选择", trigger: "change" }],
        desc: [
          { required: true, message: "请输入", trigger: "blur" },
          { min: 1, max: 40, message: "最多输入40字", trigger: "change" },
        ],
        ChannelList: [
          {
            validator: (rule, value, callback) => {
              if (this.ChannelList.length) {
                callback();
              } else {
                callback(new Error("暂无数据"));
              }
            },
            trigger: "submit",
          },
        ],
        // 部门编码
        code: [
          { required: true, message: "部门编码不能为空", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "部门编码的长度为2-10个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {},
  methods: {
    async getdetails() {
      if (this.taskinfolist.taskId) {
        this.taskdetailslist = await getdetails(this.taskinfolist.taskId);
        // console.log(this.taskdetailslist);
        this.formData = {
          innerCode: this.taskinfolist.innerCode,
          productType: this.taskinfolist.productTypeId,
          userId: this.taskinfolist.userId,
          desc: this.taskinfolist.desc, //22
          assignorId: this.taskinfolist.assignorId, //8
          createType: this.taskinfolist.createType, //1
        };
        this.inputfn();
      } else {
        this.formData = {
          innerCode: "",
          productType: "",
          userId: "",
          desc: "",
        };
      }
    },
    async getOpAndChalList() {
      const res = await getOperatorList(this.formData.innerCode);
      if (res && res.length > 0) {
        this.OperatorList = res;
      } else {
        this.OperatorList = [];
      }
      const res1 = await getChannelList(this.formData.innerCode);
      if (res1 && res1.length > 0) {
        this.ChannelList = res1;
        this.ChannelList = res1.filter((item) => {
          return item.sku != null;
        });
        this.expectList = this.ChannelList.map((item) => {
          return {
            channelCode: item.channelCode,
            expectCapacity: item.maxCapacity - item.currentCapacity,
            skuId: item.skuId,
            skuImage: item.sku.skuImage,
            skuName: item.sku.skuName,
          };
        });
        // console.log( this.expectList);
      } else {
        this.ChannelList = [];
      }
    },
    inputfn() {
      this.getOpAndChalList();
    },
    close() {
      this.$refs.addTask.resetFields();
      this.formData = {
        innerCode: "",
        productType: "",
        userId: "",
        desc: "",
      }; // 重置表单
      this.$emit("update:showAddDialog", false);
    },
    close1() {
      this.showvmdialog = false;
    },
    // 点击取消时调用
    quitfn() {
      this.close();
    },
    // 点击确定时调用
    btnOK() {
      this.$refs.addTask.validate(async (right) => {
        if (right) {
          if (this.formData.assignorId) {
            // console.log(this.formData);
            const res = await ReCreatetask({
              ...this.formData,
              details: this.expectList,
            });
            console.log(res);
            if (res == true) {
              this.$message("重新创建成功");
              this.close();
            }
          } else {
            //新增场景
            const res = await ReCreatetask({
              ...this.formData,
              assignorId: this.formData.userId,
              createType: 1,
              details: this.expectList,
            });
            console.log(res);
            if (res == true) {
              this.$message("重新创建成功");
              this.close();
            }
          }
          // 通知父组件更新
          this.$emit("updateTaskList");
          this.close();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-content {
  overflow: auto;
  max-height: calc(100vh - 180px); /* 根据您的需要调整数字 */
  padding: 20px;
}
.el-dialog__header,
.el-dialog__footer {
  position: sticky;
  z-index: 1;
}
.el-dialog__header {
  top: 0;
}
.el-dialog__footer {
  bottom: 0;
}
</style>
